<!-- fsdfsdfsdfsdfsdfsdf -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="font/fonts.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
</head>

<body class="bg_0">
<div id="container">
    <div id="menu">
    	<div id="logo">
        <a href="index.php"> <img src="img/logo.png" border="0"/></a>
        </div><!--logo-->
    	<ul class="menu-lista">
            <li class="primeiro"><a href="#">A EMPRESA</a></li>
            <li><a href="#"> PRODUTOS</a></li>
            <li style="margin-right:90px"><a href="#">RECEITAS</a></li>
            
            <li style="margin-left:60px"><a href="#">ONDE COMPRAR</a></li>
            <li><a href="#">NOTÍCIAS </a></li>
            <li><a href="#">CONTATO </a></li>
        </ul>
    </div><!--menu-->
    <style>
	#miolo {
		position:relative;
		margin:0 auto;
	}
	#miolo img {
		position:absolute;
	}
	</style>
    <div id="miolo" style="width:1024px; height:345px;">
    	<img class="produto1" src="img/queijo-prato.png" />
        <img class="produto2" src="img/requijao-barra.png" />
        <img class="produto3" src="img/queijo-padrao.png" />
        <img class="produto4" src="img/ricota.png" />
        <img class="produto5" src="img/queijo.png" />
        <img class="produto6" src="img/coalhada.png" />
        <img class="produto7" src="img/creme-de-leite.png" />
        <img class="produto8" src="img/requijao-cremoso.png" />
        <img class="produto9" src="img/cottage.png" />
        <img class="produto10" src="img/manteiga.png" />
    </div><!--miolo-->
	<div id="rodape">
        <div class="rodape_fixo">
        	<p align="right"><a href="#" class="slideD">MAPA DO SITE</a></p>
        </div><!--rodape_fixo-->
        <div class="mapa">
        </div><!--mapa-->
	</div><!--rodape-->
</div><!--container-->
<script type="text/javascript">
$(".slideD").click(function () {
		if ($(".mapa").is(":hidden")) {
			$(".mapa").slideDown("slow");
			//document.getElementById("seta").src = "images/setaaberto.png";
		}
		else
		{
			$(".mapa").slideUp("slow");
			//document.getElementById("seta").src = "images/setafechado.png";
		}
});
	$('.produto1').mouseover(function() {
	  $(this).stop().animate({width:'162px', height:'133px', easing:'linear'},100,'linear', function(){$(this).stop().animate({width:'171px', height:'140px'},100,'linear').css('z-index','10');});
	});
	$('.produto1').mouseout(function() {
	  $(this).stop().animate({width:'154px',height:'126px'}).css('z-index','1');
	});
	$('.produto2').mouseover(function() {
	  $(this).stop().animate({width:'165px',height:'131px'}).css('z-index','10');
	});
	$('.produto2').mouseout(function() {
	  $(this).stop().animate({width:'149px',height:'118px'}).css('z-index','2');
	});
	$('.produto3').mouseover(function() {
	  $(this).stop().animate({width:'156px',height:'196px'}).css('z-index','10');
	});
	$('.produto3').mouseout(function() {
	  $(this).stop().animate({width:'141px',height:'177px'}).css('z-index','3');
	});
	$('.produto4').mouseover(function() {
	  $(this).stop().animate({width:'154px',height:'191px'}).css('z-index','10');
	});
	$('.produto4').mouseout(function() {
	  $(this).stop().animate({width:'139px',height:'172px'}).css('z-index','4');
	});
	$('.produto5').mouseover(function() {
	  $(this).stop().animate({width:'163px',height:'252px'}).css('z-index','10');
	});
	$('.produto5').mouseout(function() {
	  $(this).stop().animate({width:'147px',height:'227px'}).css('z-index','3');
	});
	$('.produto6').mouseover(function() {
	  $(this).stop().animate({width:'129px', height:'197px'}).css('z-index','10');
	});
	$('.produto6').mouseout(function() {
	  $(this).stop().animate({width:'116px',height:'177px'}).css('z-index','4');
	});
	$('.produto7').mouseover(function() {
	  $(this).stop().animate({width:'98px',height:'285px'}).css('z-index','10');
	});
	$('.produto7').mouseout(function() {
	  $(this).stop().animate({width:'88px',height:'256px'}).css('z-index','2');
	});
	$('.produto8').mouseover(function() {
	  $(this).stop().animate({width:'123px',height:'213px'}).css('z-index','10');
	});
	$('.produto8').mouseout(function() {
	  $(this).stop().animate({width:'110px',height:'191px'}).css('z-index','3');
	});
	$('.produto9').mouseover(function() {
	  $(this).stop().animate({width:'162px',height:'160px'}).css('z-index','10');
	});
	$('.produto9').mouseout(function() {
	  $(this).stop().animate({width:'145px',height:'144px'}).css('z-index','2');
	});
	$('.produto10').mouseover(function() {
	  $(this).stop().animate({width:'147px',height:'116px'}).css('z-index','10');
	});
	$('.produto10').mouseout(function() {
	  $(this).stop().animate({width:'132px',height:'104px'}).css('z-index','1');
	});
</script>
<style>
.produto1 {
	margin-top: 125px;
	z-index:1;
	width:154px;
	height:126px;
}
.produto2 {
	margin-top: 160px;
	margin-left: 85px;
	z-index:2;
	width:149px;
	height:118px;
}
.produto3 {
	margin-top: 110px;
	margin-left: 175px;
	z-index:3;
	width:141px;
	height:177px;
}
.produto4 {
	margin-top: 140px;
	margin-left: 255px;
	z-index:4;
	width:139px;
	height:172px;
}
.produto5 {
	margin-top: 45px;
	margin-left: 355px;
	z-index:3;
	width:147px;
	height:227px;
}
.produto6 {
	margin-top: 145px;
	margin-left: 440px;
	z-index:4;
	width:116px;
	height:177px;
}
.produto7 {
	margin-top: 0;
	margin-left: 540px;
	z-index:2;
	width:88px;
	height:256px;
}
.produto8 {
	margin-top: 120px;
	margin-left: 610px;
	z-index:3;
	width:110px;
	height:191px;
}
.produto9 {
	margin-top: 160px;
	margin-left: 690px;
	z-index:2;
	width:145px;
	height:144px;
}
.produto10 {
	margin-top: 170px;
	margin-left: 810px;
	z-index:1;
	width:132px;
	height:104px;
}
</style>
</body>
</html>